﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>itemDetailPage</title>

     <!-- application references -->
    <link href="/pages/itemDetail/itemDetail.css" rel="stylesheet" />
    <script src="/pages/itemDetail/itemDetail.js"></script>
</head>

<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="itemdetailpage fragment">
    	<div class="satellite"></div>

        <header aria-label="Header content" role="banner">
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle"></span>
                <span class="pagesubtitle"></span>
            </h1>
        </header>

        <section class="infographics" aria-label="Infographics" role="main">

			<div class="populationTemplate" data-win-control="WinJS.Binding.Template">
				<div class="genderByAge">
                    <div class="ageRange" data-win-bind="textContent:ageRange"></div>
					<div class="male" data-win-bind="style.width:malePercent;"></div>
					<div class="female" data-win-bind="style.width:femalePercent;"></div>
				</div>
			</div>

			<div class="commuteTemplate" data-win-control="WinJS.Binding.Template">
				<div class="commuteBy">
					<div class="circle" data-win-bind="style.width:percent; style.height:percent; style.backgroundImage:bgImage" style="background-color: #D6F317; background-size: cover; border-radius: 34.5px; transform: scale(1.5, 1.5); -ms-grid-column-align: center; -ms-grid-row-align: center; min-width: 30px; min-height: 30px;"></div>
					<div class="value" data-win-bind="textContent:percent"></div>
				</div>
			</div>

			<div class="housingTemplate" data-win-control="WinJS.Binding.Template">
                <div class="housingData" data-win-bind="className:type; style.height:percent" style="-ms-grid-row-align: end;">
                    <span class="housingLabel slideUp" data-win-bind="textContent:type"></span>
                    <span class="housingValue slideUp" data-win-bind="textContent:percent"></span>
                </div>
			</div>

        	<h2 id="populationTitle" class="infographicTitle">Population</h2>
            <div id="population" style="-ms-grid-row: 2;">
			    <div id="populationGraph" data-win-control="WinJS.UI.Repeater" data-win-options="{ template:select('.populationTemplate')}"></div>
		    </div>

        	<h2 id="commuteTitle" class="infographicTitle">Commute</h2>
		    <div id="commute">
			    <div id="commuteGraph" data-win-control="WinJS.UI.Repeater" data-win-options="{template:select('.commuteTemplate')}"></div>
		    </div>

        	<h2 id="housingTitle" class="infographicTitle">Rent vs. Own</h2>
		    <div id="housing">
			    <div id="housingGraph" data-win-control="WinJS.UI.Repeater" data-win-options="{template:select('.housingTemplate')}" style="display: -ms-grid; -ms-grid-columns: 1fr 1fr; -ms-grid-rows: 300px;"></div>
		    </div>

        </section>
    </div>
</body>
</html>
